//调用函数，判断是否有token
checkLogin()

//渲染用户名
renderUsername()

//退出登录
logout()

//统计数据区域
async function getData() {
    const token = localStorage.getItem('token')
    const res = await axios({
        url: '/dashboard',
        method: 'GET',
        //请求头参数 → 校验是否登录
        /*  headers: {
             Authorization: token
         } */
    })

    // console.log(res)

    const {
        overview
    } = res.data
    // console.log(overview)
    // console.log(Object.keys(overview))
    Object.keys(overview).forEach((key) => {
        // console.log(key)
        document.querySelector(`.${key}`).innerHTML = overview[key]
    })

    /*  try {
         const res = await axios({
             url: '/dashboard',
             method: 'GET',
             //请求头参数 → 校验是否登录
             headers: {
                 Authorization: token
             }
         })

         const {
             overview
         } = res.data.data
         // console.log(overview)
         // console.log(Object.keys(overview))
         Object.keys(overview).forEach((key) => {
             // console.log(key)
             document.querySelector(`.${key}`).innerHTML = overview[key]
         })
     } catch (error) {
         // console.dir(error)
         //401就是token失效的问题 → 过期或恶意篡改
         //todo：提示重新登录，login页面 → 把localstorage里面的用户缓存清空
         if (error.response.status == 401) {
             showToast('登录失败，请重新登录')
             localStorage.removeItem('username')
             localStorage.removeItem('token')
             setTimeout(() => {
                 location.href = './login.html'
             }, 1500);
         }
     } */


    // 2022年薪资走势
    /* 基于准备好的dom，初始化echarts实例 */
    const myLine = echarts.init(document.querySelector('#line'));
    /* 指定图表的配置项和数据 */
    // console.log(res.data.year)
    const month = res.data.year.map((item) => {
        return item.month
    })
    const salary = res.data.year.map((item) => {
        return item.salary
    })
    // console.log(month)
    // console.log(salary)
    const option1 = {
        title: {
            text: '2022年薪资走势',
            left: 15,
            top: 15
        },
        //是否显示提示框组件
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: month
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: salary,
            type: 'line',
            smooth: true,
            // 阴影的填充样式
            areaStyle: {
                color: '#DDEFFB',
                lineStyle: {
                    type: 'dashed'
                }
            },
            // 线的样式
            lineStyle: {
                // 线宽
                width: 8,
                color: '#5694EC'
            },
            // 标记的大小
            symbolSize: 10,
        }]
    };

    /* 使用刚指定的配置项和数据显示图表。 */
    myLine.setOption(option1);


    // 班级薪资分布
    /* 基于准备好的dom，初始化echarts实例 */
    const mySalary = echarts.init(document.querySelector('#salary'));
    /* 指定图表的配置项和数据 */
    // console.log(res.data.salaryData)
    // const salaryData = res.data.salaryData

    const salaryData = res.data.salaryData.map((item) => {
        // console.log(item)
        return {
            value: item.g_count + item.b_count,
            name: item.label
        }
    })
    // console.log(salaryData)
    const option2 = {
        title: {
            text: '班级薪资分布',
            left: 15,
            top: 15
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [{
            name: '班级薪资分布',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            data: salaryData,
            // 颜色
            color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
        }]
    };
    /* 使用刚指定的配置项和数据显示图表。 */
    mySalary.setOption(option2);





    // 班级每组薪资
    // console.log('--------------')
    const groupDataList = res.data.groupData
    // console.log(groupDataList)
    // console.log(groupDataList[1])
    function renderGroupSalary() {
        /* 基于准备好的dom，初始化echarts实例 */
        const myLines = echarts.init(document.querySelector('#lines'));
        const option3 = {
            // 显示提示框
            tooltip: {},
            // 绘图网络
            grid: {
                left: 70,
                top: 30,
                right: 30,
                bottom: 50
            },
            xAxis: {
                type: 'category',
                data: names
            },
            yAxis: {
                type: 'value',
                // 分割线的类型
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{
                data: hopeSalarys,
                type: 'bar',
                // 柱状图的样式
                itemStyle: {
                    // 柱状图的颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#34D39A' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }, {
                data: salarys,
                type: 'bar',
                // 柱状图的样式
                itemStyle: {
                    // 柱状图的颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#499FEE' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }]
        };
        /* 使用刚指定的配置项和数据显示图表。 */
        myLines.setOption(option3);
    }

    let index = ''
    console.log(index)
    console.log('-------') //??????????

    let names = groupDataList[1].map(item => {
        return item.name
    })
    let hopeSalarys = groupDataList[1].map(item => {
        return item.hope_salary
    })
    let salarys = groupDataList[1].map(item => {
        return item.salary
    })
    renderGroupSalary()

    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        // console.log(e.target.innerText)
        index = e.target.innerText
        console.log(index)

        if (e.target.classList.contains('btn')) {
            btns.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            // console.log(groupDataList[index])
            names = groupDataList[index].map(item => {
                return item.name
            })
            hopeSalarys = groupDataList[index].map(item => {
                return item.hope_salary
            })
            salarys = groupDataList[index].map(item => {
                return item.salary
            })
            // console.log(salarys)
            renderGroupSalary()
        }
    })








    // 男女薪资分布
    /* 基于准备好的dom，初始化echarts实例 */
    const myGender = echarts.init(document.querySelector('#gender'));
    /* 指定图表的配置项和数据 */
    // console.log(res.data.salaryData)
    const boySalary = res.data.salaryData.map((item) => {
        return {
            name: item.label,
            value: item.b_count
        }
    })
    // console.log(boySalary)

    const girlSalary = res.data.salaryData.map((item) => {
        return {
            name: item.label,
            value: item.g_count
        }
    })
    console.log(girlSalary)

    const datas = [boySalary, girlSalary];
    console.log(datas)

    const option4 = {
        tooltip: {
            trigger: 'item'
        },
        // 不写legend 不会显示图例组件
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        // 颜色
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        // 标题，通过数组设置多个
        title: [{
                text: '男女薪资分布',
                left: 10,
                top: 10,
                // text属性的样式
                textStyle: {
                    // 文字的大小
                    fontSize: 16
                }
            },
            {
                text: '男生',
                left: '50%',
                top: '45%',
                textStyle: {
                    fontSize: 12
                },
                textAlign: 'center'
            },
            {
                text: '女生',
                left: '50%',
                top: '85%',
                textStyle: {
                    fontSize: 12
                },
                textAlign: 'center'
            }
        ],
        series: [{
                type: 'pie',
                radius: ['20%', '30%'],
                // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                center: ['50%', '30%'],
                data: boySalary
            },
            {
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                data: girlSalary
            }
        ]
    }
    /* 使用刚指定的配置项和数据显示图表。 */
    myGender.setOption(option4);


    // 籍贯分布
    /* 基于准备好的dom，初始化echarts实例 */
    const myMap = echarts.init(document.querySelector('#map'));
    /* 指定图表的配置项和数据 */
    // console.log(res.data.provinceData)
    const provinceData = res.data.provinceData
    // console.log(11111)
    const dataList = [{
            name: '南海诸岛',
            value: 0
        },
        {
            name: '北京',
            value: 0
        },
        {
            name: '天津',
            value: 0
        },
        {
            name: '上海',
            value: 0
        },
        {
            name: '重庆',
            value: 0
        },
        {
            name: '河北',
            value: 0
        },
        {
            name: '河南',
            value: 0
        },
        {
            name: '云南',
            value: 0
        },
        {
            name: '辽宁',
            value: 0
        },
        {
            name: '黑龙江',
            value: 0
        },
        {
            name: '湖南',
            value: 0
        },
        {
            name: '安徽',
            value: 0
        },
        {
            name: '山东',
            value: 0
        },
        {
            name: '新疆',
            value: 0
        },
        {
            name: '江苏',
            value: 0
        },
        {
            name: '浙江',
            value: 0
        },
        {
            name: '江西',
            value: 0
        },
        {
            name: '湖北',
            value: 0
        },
        {
            name: '广西',
            value: 0
        },
        {
            name: '甘肃',
            value: 0
        },
        {
            name: '山西',
            value: 0
        },
        {
            name: '内蒙古',
            value: 0
        },
        {
            name: '陕西',
            value: 0
        },
        {
            name: '吉林',
            value: 0
        },
        {
            name: '福建',
            value: 0
        },
        {
            name: '贵州',
            value: 0
        },
        {
            name: '广东',
            value: 0
        },
        {
            name: '青海',
            value: 0
        },
        {
            name: '西藏',
            value: 0
        },
        {
            name: '四川',
            value: 0
        },
        {
            name: '宁夏',
            value: 0
        },
        {
            name: '海南',
            value: 0
        },
        {
            name: '台湾',
            value: 0
        },
        {
            name: '香港',
            value: 0
        },
        {
            name: '澳门',
            value: 0
        },
    ]

    // 筛选数据
    dataList.forEach(item => {
        const res = provinceData.find(v => {
            return v.name.includes(item.name)
        })
        // console.log(res)
        // 数据赋值
        if (res !== undefined) {
            item.value = res.value
        }
    })
    console.log(dataList)
    console.log(11111)

    const option5 = {
        title: {
            text: '籍贯分布',
            left: 10,
            top: 10,
            // text属性的样式
            textStyle: {
                // 文字的大小
                fontSize: 16
            }
        },
        tooltip: { //这里设置提示框
            trigger: 'item', //数据项图形触发
            backgroundColor: "transparent", //提示框浮层的透明度
            //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
            backgroundColor: 'rgba(0,0,0,0.5)', //提示框浮层的背景颜色
            formatter: '{b}: {c} 位学员',
            textStyle: {
                // 字体颜色
                color: '#fff',
            },
        },
        visualMap: { //视觉映射组件
            top: 'center',
            left: 'left',
            min: 0,
            max: 10,
            text: ['max', 'min'],
            realtime: false, //拖拽时，是否实时更新
            calculable: false, //是否显示拖拽用的手柄
            inRange: {
                color: ['#ffffff', '#0075F0']
            },
            show: true,
            left: 40,
        },
        series: [{
            name: '籍贯分布',
            type: 'map',
            mapType: 'china',
            roam: false, //是否开启鼠标缩放和平移漫游
            itemStyle: { //地图区域的多边形 图形样式
                normal: { //是图形在默认状态下的样式
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                    label: {
                        show: true, //是否显示标签
                        textStyle: {
                            color: "black"
                        }
                    }
                },
                zoom: 1.5, //地图缩放比例,默认为1
                emphasis: { //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    label: {
                        show: true
                    },
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            },
            top: "3%", //组件距离容器的距离
            data: dataList
        }]
    };
    /* 使用刚指定的配置项和数据显示图表。 */
    myMap.setOption(option5);
}
getData()